<template>
  <div class="container">
    <div class="header-box">
      <div v-for="(item,index) in selectList" :key="item" :style="{background:selectIndex===index?'var(--ep-color-background)':'',color:selectIndex===index?'var(--el-color-primary)':'#89919c'}" @click="select(index)" >{{ item }}</div>

    </div>
    <div ref="middleChart" class="middle-chart"></div>
  </div>
</template>
<script>
export default {
  name: 'MiddleChart',
  data() {
    return {
      selectList: ['本年', '本季度', '本月', '本周'],
      selectIndex: 0
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    select(index) {
      this.selectIndex = index
    },
    echartsInit() {
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          }
        },
        grid: {
          top: '20%',
          right: '2%',
          bottom: '2%',
          left: '2%',
          containLabel: true
        },
        legend: {

          right: '10%',
          top: '5%',
          itemWidth: 16,
          itemHeight: 16,
          itemGap: 25,
          icon: 'stack',
          textStyle: {
            color: '#666'
          }
        },
        xAxis: {
          type: 'category',
          data: ['xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx', 'xxxx'],
          axisLine: {
            show: false // 隐藏x轴线
          },
          axisTick: {
            show: false // 隐藏x轴刻度
          }
        },

        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                color: '#edeef4',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: 'XXX人数',
            type: 'bar',
            barWidth: '10%',
            color: '#2cab40',
            data: [300, 520, 400, 350, 400, 370, 260, 150, 240, 200, 180, 160]
          },
          {
            name: 'XXX花费',
            smooth: true,
            type: 'line',
            barGap: '10%', /* 多个并排柱子设置柱子之间的间距*/
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            symbolSize: 8,
            // 设置拐点颜色以及边框
            color: '#9155db',
            lineStyle: {
              color: '#9155db',
              width: 3,
              type: 'solid' // 'dotted' 点型虚线 'solid' 实线 'dashed' 线型虚线
            },
            data: [80, 420, 230, 390, 450, 300, 250, 140, 50, 70, 140, 150]
          },
          {
            name: 'xxx人数',
            type: 'bar',
            barWidth: '10%',
            color: '#1762f2',
            barGap: '-100%',
            data: [220, 352, 200, 134, 190, 130, 150, 55, 100, 120, 100, 120]
          }
        ]
      }
      const myChart = this.$echarts.init(this.$refs.middleChart)
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  position: relative;

  .middle-chart{
    width: 66.615vw;
    height: 15.26vw;
  }

  .header-box{
    position: absolute;
    top: 0.625vw;
    left: 1.042vw;
    z-index: 998;
    display: flex;

    div{
      width: 3.125vw;
      margin-right: 1.042vw;
      color: #89919c;
      text-align: center;
      border-radius: 2.604vw;
      cursor: pointer;
    }
  }
}

</style>
